<template>
  <view>
    <VNavbar :search-text="options.searchText"/>
    <view
      class="drop-down mb-30rpx h-88rpx flex items-center justify-between bg-#fff px-24rpx text-28rpx"
    >
      <view
        v-for="item in menu"
        :key="item.type"
        class="flex items-center"
        @tap="showPopup(item)"
      >
        <text class="mr-8rpx pb-8rpx">
          {{ item.name }}
        </text>
        <up-icon color="#4e5969" size="16rpx" name="arrow-down-fill" />
      </view>
    </view>
    <JobList :job-list="jobList"  v-if="clientType == 'customer'"/>
    <enterpriseJobList v-if="clientType == 'enterprise'" />
    <up-popup
      :show="popupData.show"
      mode="center"
      :safe-area-inset-bottom="false"
      bg-color="transparent"
      @close="close"
      @open="open"
    >
      <view class="w-662rpx overflow-hidden rounded-24rpx bg-#fff">
        <view class="relative h-106rpx flex items-center justify-end px-24rpx">
          <text
            class="absolute left-50% top-50% translate-[-50%] text-center text-[28rpx] text-[#1d2129] font-medium"
          >
            {{ popupData.title }}
          </text>
          <up-icon
            :name="PopupClose"
            color="#f2f2f2"
            size="44rpx"
            @tap="popupData.show = false"
          />
        </view>
        <view>
          <!-- 城市/职位分类 -->
          <SecondaryCategory
            v-if="['1', '2'].includes(popupData.menuType)"
            :list="secondaryCategoryList"
            :type="popupData.menuType"
            @getSearchList="getSearchList"
          />
          <!-- 职位要求 -->
          <SelectClaim v-if="popupData.menuType === '3'" @getSearchList="getSearchList"/>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import VNavbar from './components/v-navbar.vue';
import SecondaryCategory from './components/secondary-category.vue';
import SelectClaim from './components/select-claim.vue';
// import PopupClose from '@/static/images/common/popup-close.png';
import JobList from '@/pages/components/jobList/index.vue';
import enterpriseJobList from '@/pages/components/enterprise-job-list/index.vue';
import { useUserStore } from '@/store';
import {customerJobList} from '@/api/user/customer';
// 城市列表
import cityList from "@/pages/components/infocard/pca-code.json";
import {userJobType} from "@/api/user";

const PopupClose = 'https://yiliao.test03.qcw800.com/static/images/common/popup-close.png'

const options = ref<Record<string, string>>({});

interface MenuItem {
  type: string;
  name: string;
  showPopup: boolean;
}

const menu = ref<Array<MenuItem>>([
  {
    name: '城市',
    type: '1',
    showPopup: true,
  },
  {
    name: '职位分类',
    type: '2',
    showPopup: true,
  },
  {
    name: '职位要求',
    type: '3',
    showPopup: true,
  },
  // {
  //   name: '排序',
  //   type: '4',
  //   showPopup: false,
  // },
]);
type List = { name: string; children: { name: string }[] }[];

// 职位分类列表
const classificationList = [
  {
    name: '全部',
    code: ''
  }
];
const secondaryCategoryList = ref<List>([]);
const popupData = reactive({
  show: false,
  title: '',
  menuType: '',
});
const showPopup = (item: MenuItem) => {
  if (item.showPopup) {
    popupData.title = item.name;
    popupData.menuType = item.type;
    popupData.show = true;
    if (item.type === '1') {
      secondaryCategoryList.value = cityList;
    }
    if (item.type === '2') {
      secondaryCategoryList.value = classificationList;
    }
  }
};
const close = () => {};
const open = () => {};
const jobList = reactive([])
async function getJobList(params) {
  jobList.splice(0, jobList.length);
  let r = await customerJobList({
    ...params
  }, "搜索详情页")
  if (!r) {
    uni.showToast({title: '获取职位列表失败', icon: 'none'})
    return
  }
  console.log('搜索结果:::',r)
   r.jobList.forEach(item => {
    jobList.push(item);
  })
}

const getUserJobType = async () => {
  let res = await userJobType();
  if(res) {
    res.map(v => {
      if(v.pid === 0) {
        classificationList.push({
          name: v.content,
          code: v.id,
          children: []
        })
      }
    })
    res.map(v => {
      classificationList.map(item => {
        if(classificationList.filter(vx => vx.code === v.id)) {
         if(item.code === v.pid) {
           item.children.push({
             name: v.content,
             code: v.id
           })
         }
        }
      })
    })
  }
}

const params = reactive({})

const getSearchList = (value) => {
  params.status = 1
  if(value.type === 'zhiye') {
    params.position_id = value.value[0].code === '' ? value.value[0].code : value.value[1].code
  }
  if(value.type == 'gangWei') {
    params.salary_min = value.money
    params.majors_id = value.education.id
    params.company_type = value.education.company_type
  }
  if(value.type === 'city') {
    params.province_id = value.value[0].code
    params.city_id = value.value[0].code === '' ? '' : value.value[1].code
  }
  popupData.show = false;
  getJobList(params)
  // let params = {
  //   status: '', //职位状态 1招聘中 2已关闭 3未过审
  //   name: options.searchText,
  //   position_id: '', //职位id
  //   salary_min: '', //最小值
  //   salary_max: '', //最大值
  //   qualifications: '', //学历要求
  //   company_type: '', //企业类型
  //   majors_id: '', //专业id
  //   company_id: '', //公司id
  //   job_name: '', //职位名称
  // }
  // console.log(params)
}

onLoad((params: any) => {
  options.value = params;
  console.log(options.value, '搜索参数')
  params.job_name = options.value.searchText
  getJobList(params)
  getUserJobType()
});
const { globalData } = getApp();
const { clientType } = useUserStore();
</script>

<style scoped lang="scss"></style>
